<template>
    <div class="search-container">
        <div class="city-search">
            <div class="mui-input-row mui-search">
				<input type="search" class="mui-input-clear" placeholder="搜电影、影院" v-model="val">
			</div>
        </div>
        <div class="film" v-if="film.length!=0">
            <span class="ftitle">电影</span>
            <ul>
                <li v-for="item in film" :key="item.id">
                    <router-link :to="'/film/filmdetail/'+item.id" class="film-content" tag="span">
                        <img v-lazy="picFix(item.img)">
                        <span class="film-info">
                            <span class="film-name"><h1>{{item.nm}}</h1><span :class="['icon',item.version=='v2d imax' ? 'active1' : '', item.version=='v3d imax' ? 'active2' : '']" ></span></span>
                            <p class="film-sc" v-if="item.sc!=0">观众评<span>{{item.sc}}</span></p>
                            <p class="film-sc" v-else><span>{{item.wish}}</span>人想看</p>
                            <p>主演:{{item.star}}</p>
                            <p>{{item.showInfo}}</p>
                        </span>
                    </router-link>
                    <mt-button :type="item.globalReleased==true ? 'danger' : 'primary'" size="small" >{{item.globalReleased==true ? "购票" : "预售"}}</mt-button>

                </li>
            </ul>
        </div>

        <div class="cinema" v-if="cinema.length!=0">
            <span class="ctitle">影院</span>
            <ul class="list-data">
                <router-link :to="'/film/cinema/'+item.id" v-for="item in cinema" :key="item.id"  tag="li">
                    <div>
                        <span class="span1">
                            <span>{{item.nm}}</span><span>{{item.sellPrice}}</span>元起
                        </span>
                        <span class="span2">{{item.addr}}</span>
                        <span class="span4">近期场次:{{item.showTimes}}</span>
                    </div>
                    <span class="span5">{{item.distance}}</span>
                </router-link>
            </ul>
        </div>
    </div>
</template>
<script>
import mui from '../../lib/js/mui.min.js'
export default {
    data(){
        return{
            val:'',
            film:[],
            cinema:[]
        }
    },
    watch:{
        val(){
            this.axios.get('search',{
                params:{
                    kw:this.val,
                    cityId:20,
                    stype:-1
                }
            }).then(result=>{
                if(result.status==200){
                    console.log(result)
                    if(!result.data.movies){
                        this.film = []
                    }else{
                        this.film = result.data.movies.list
                    }
                    if(!result.data.cinemas){
                        this.cinema = []
                    }else{
                        this.cinema = result.data.cinemas.list
                    }
                }
            })
        }
    },
    mounted(){
        mui(".mui-input-row input").input()
    },
    methods:{
        picFix(wh) {
            if (wh !== undefined) {
                return wh.replace("w.h", "64.90");
            }
        }
    }
}
</script>
<style lang="scss" scoped>
input[type=search]{
    background-color: #fff;
}
.mui-search{
    margin-top: 15px;
    width: 80%;
}
.search-container{
    .city-search{
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: rgb(241, 241, 241);
        padding: 0 20px;
        i{
            margin-right: 5px;
            width: 0;
            height: 0;
            border: 4px solid #b0b0b0;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            display: inline-block;
            margin-left: 4px;
            margin-top: 5px;
        }
    }
    .film{
        .ftitle{
            display: flex;
            border-bottom: 1px solid lightgray;
            font-size: 15px;
            color: rgb(163, 162, 162);
            margin-top: -10px;
            padding-left: 15px;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
            border-bottom: 10px solid rgb(233, 233, 233); 
            li{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10px 15px;
                border-bottom: 1px solid lightgray; 
                img{
                    background-color: #ccc;
                }
                img[lazy="loading"] {
                    width: 64px;
                    height: 90px;
                }
                .film-content{
                    display: flex;
                    justify-content: space-between;
                    width: 285px;
                    .film-info{
                        width: 210px;
                        .film-name{
                            display: flex;
                            h1{
                                font-size: 16px;
                                width: 150px;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }
                            .icon {
                                line-height: 14px;
                                display: inline-block;
                                margin-top: 5px;
                                -webkit-box-flex: 0;
                                flex: 0 0 auto;
                                border-radius: 2px;
                                margin-right: 3px;
                                color: #3c9fe6;
                                width: 43px;
                                height: 14px;
                            }
                            .active1 {
                                background: url('../../images/2d_max.png') no-repeat;
                                background-size: 43px 14px;
                            }
                            .active2 {
                                background: url('../../images/3d_max.png') no-repeat;
                                background-size: 43px 14px;
                            }
                        }
                        .film-sc{
                            span{
                                font-size: 15px;
                                font-weight: bold;
                                color: rgb(255, 115, 0);
                            }
                        }
                        p{
                            margin: 0;
                            padding: 0;
                            font-size: 13px;
                            color: rgb(22, 22, 22);
                            width: 205px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                    }
                }

            }
        }
    }
    .cinema{
        margin-top: 10px;
        .ctitle{
            display: flex;
            border-bottom: 1px solid lightgray;
            font-size: 15px;
            color: rgb(150, 149, 149);
            padding-left: 15px;
        }
        .mui-active{
            color: red;
            border-color: red;
        }
        .list-data{
            list-style: none;
            margin: 0;
            padding: 0;
            border-bottom: 10px solid rgb(233, 233, 233); 
            li{
                padding: 10px 15px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                div{
                    width: 280px;
                    display: flex;
                    flex-direction: column;
                    .span1{
                        direction: flex;
                        justify-content: space-between;
                        font-size:12px;
                        white-space:nowrap; 
                        color: red;
                        :nth-child(1){
                            font-size: 16px;
                            font-weight: bold;
                            color: #333;
                        }
                        :nth-child(2){
                            font-size: 18px;
                            color:red;
                            margin-left: 5px;
                        }
                    }
                    .span2{
                        font-size: 12px;
                        width: 100%;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                        color: rgb(121, 120, 120);
                    }
                    .span3{
                        font-size: 14px;
                        display: flex;
                        align-items: center;
                        color: rgb(138, 138, 138);
                        img{
                            width: 20px;
                            height: 20px;
                            margin-right: 3px;
                        }
                    }
                    .span4{
                        font-size: 12px;
                        color: #333;
                    }
                }
                .span5{
                    font-size: 12px;
                    color: #333;
                }
            }
        }
    }
}
</style>
